


<!-- 采用html5  -->
<!DOCTYPE html>
<html>

  <head>

    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" >

    <title>我的APP</title>

    <style>
        /*元素选择器*/

        html{
            height:100%;
        }
        body{

            height:100%;
            padding:0px;/*内边距*/
            margin:0px;/*外边距*/
        }
        
        /* 类选择器 */
        .my-container{

            width:100%;
            height:100%;
            background-color: #f0f0f0;

        }

        .my-input{
            position: relative;/*给子元素一个定位基点*/
        }

        .my-input input{
            box-sizing: border-box;
            width:100%;
            height:50px;
            border:none;/*无边框*/
            outline:none;/*无外轮廓*/
            border-bottom:1px solid #E0E0E0;
            padding-left:80px;
        }

        .my-input label{

            position:absolute;
            left:0px;
            top:0px;

            line-height: 50px;/*设置行高，使之垂直居中*/
            font-size:18px;
            padding-left:3px;

        }

        .my-title{

            font-size:55px;
            text-align: center;/*水平居中*/

            color:#CCCCCC;
            font-weight:bold;/*文字加粗*/

            text-shadow:2px 15px 10px #dddddd;

            padding-top:25%;
            padding-bottom:40px;


        }

        .my-btn{
            width:100%;
            height:50px;
            background-color:aqua;
            border:none;
            outline:none;
            color:white;
            font-size:20px;
            border-radius:10px;/*圆角半径*/

            margin-top:20px;
        }

        .my-btn:active{

            background-color:#FFDD00;

        }

        .my-footer{

            text-align: center;
            color:#AAAAAA;

            margin-top:80px;

        }
    
    </style>


  </head>  


  <body>

    <!-- div ：举行区域 -->
    <div class="my-container" >


        <div class="my-title">掌上办公</div>

        <div style="padding-left:3px;padding-right:3px;box-sizing: border-box;" >
            <div class="my-input" >
                <label>帐号</label>
                <input type="text" />
            </div>
            <div class="my-input" >
                <label>密码</label>
                <input type="password" />
            </div>

            <button class="my-btn">登录</button>

        </div>


        <div class="my-footer">版权所有 &copy;XXX软件</div>

    </div>

  </body>




</html>
